@extends('layouts.app')
@section('content')
    <div class="content">
        <div class="row custom-invoice">
            <div class="row" style="background: rgba(190,190,190,0.20); height: 80px; text-align: center; padding: 10px 0;">
                <div class="col-md-4 col-sm-6 col-xs-10">
                    <p style="font-size: 16px; font-weight: bold">团队业绩</p>
                    <p>{{ $achievement/100 }}</p>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-10">
                    <p style="font-size: 16px; font-weight: bold">团队收益</p>
                    <p>{{ $teamIncome/100 }}</p>
                </div>
                <div class="col-md-4 col-sm-6 col-xs-10">
                    <p style="font-size: 16px; font-weight: bold">团队分享</p>
                    <p> {{ $share }}</p>
                </div>
            </div>
            <div class="row" style="margin-top: 20px;">
                @foreach($team as $value)
                    <div class="col-md-3 col-sm-6 col-xs-12">
                        <div class="custom-box showHideForm">
                            <div class="custom-content">
                                <img style="margin: 5px 0 0 4px; border-radius: 8px;" src="{{ $value->avatar }}" width="30"/>
                            </div>
                            <div class="custom-content" style="margin-left: 5%">
                                <span style="line-height: 40px;">{{ $value->nickname }}</span>
                            </div>
                            <div class="custom-content" style="margin-left: 15%">
                                <span style="line-height: 40px;">{{ $value->money/100 }}</span>
                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
@endsection
@push('stylesheets')
    <style>

        .custom-hide>div {
            width: 850px;
            margin: 140px auto;
            padding: 10px;
        }
        .custom-box {
            display: block;
            min-height: 40px;
            background: #ededed;
            width: 100%;
            box-shadow: 0 1px 1px rgba(0,0,0,0.1);
            border-radius: 2px;
            margin: 0 0 20px 0;
        }
        .custom-content {
            text-align: center;
            display: block;
            float: left;
            min-height: 40px;
        }

    </style>
@endpush
